<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>es6 class类中的内容</title>
  <!-- 
  在 JavaScript ES6 中， class  语法提供了一种更直观的方式来定义类和创建对象。
  1. 类的基本结构
  使用  class  关键字定义一个类，基本结构如下：
  class ClassName {
      constructor(parameters) {
          // 构造函数
      }

      methodName() {
          // 类方法
      }
  }
  2. 构造函数
  -  constructor ：每个类都可以有一个构造函数，用于初始化实例属性。构造函数在创建实例时自动调用。
  class Person {
      constructor(name, age) {
          this.name = name; // 实例属性
          this.age = age;   // 实例属性
      }
  }
  3. 类方法
  - 类方法是定义在类中的函数，可以通过实例调用。方法中的  this  关键字指向调用该方法的实例。
  class Person {
      constructor(name, age) {
          this.name = name;
          this.age = age;
      }

      sayHello() {
          console.log(Hello, my name is ${this.name});
      }
  }

  const alice = new Person("Alice", 30);
  alice.sayHello(); // 输出: Hello, my name is Alice
  4. 继承
  - 使用  extends  关键字可以实现类的继承。子类可以继承父类的属性和方法，并可以添加自己的属性和方法。
  class Employee extends Person {
      constructor(name, age, job) {
          super(name, age); // 调用父类的构造函数
          this.job = job;   // 子类特有属性
      }

      sayJob() {
          console.log(I work as a ${this.job});
      }
  }

  const bob = new Employee("Bob", 25, "Developer");
  bob.sayHello(); // 输出: Hello, my name is Bob
  bob.sayJob();   // 输出: I work as a Developer
  5. 静态方法
  - 静态方法使用  static  关键字定义，这些方法不能通过实例调用，只能通过类名调用。
  class MathUtil {
      static add(a, b) {
          return a + b;
      }
  }

  console.log(MathUtil.add(5, 3)); // 输出: 8
  6. 访问修饰符
  - ES6 类本身并没有提供访问修饰符（如  public ,  private ），但是可以通过命名约定（如以  _  开头）来表示私有属性。此外，ES2022 引入了私有字段（以  #  开头）来实现真正的私有属性。
  class Person {
      #age; // 私有属性

      constructor(name, age) {
          this.name = name;
          this.#age = age; // 只能在类内部访问
      }

      getAge() {
          return this.#age;
      }
  }

  const alice = new Person("Alice", 30);
  console.log(alice.getAge()); // 输出: 30
  // console.log(alice.#age); // 报错: 不能访问私有属性
  7. 总结
  ES6 中的  class  提供了一种更清晰和简洁的方式来定义类和对象。通过构造函数、类方法、继承、静态方法和访问修饰符等特性，开发者可以更方便地实现面向对象编程的概念。这种语法的引入使得 JavaScript 的面向对象编程更加易于理解和使用。
   -->
</head>

<body>

  <script>

    // 1. 类的方法
    // 类的方法是通过  constructor  函数来定义的，它会在创建类的实例时自动调用。此外，类还可以定义其他方法，这些方法可以通过实例调用。
    class Employee {
      constructor(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
      }

      sayHello() {
        console.log(`Hello, my name is ${this.name}`);
      }

      sayJob() {
        console.log(`I work as a ${this.job}`);
      }
    }

    const bob = new Employee("Bob", 25, "Developer");

    // 2. 类的继承
    // 类可以通过  extends  关键字继承另一个类的属性和方法。
    class Manager extends Employee {
      constructor(name, age, job, department) {
        super(name, age, job);
        this.department = department;
      }

      sayDepartment() {
        console.log(`I work in the ${this.department} department`);
      }
    }


    const alice = new Manager("Alice", 30, "Manager", "Engineering");
    // 调用方法
    alice.sayHello(); // Hello, my name is Alice
    alice.sayJob(); // I work as a Manager
    alice.sayDepartment(); // I work in the Engineering department

    // 关系
    console.log(Employee.prototype === alice.__proto__); // true
    console.log(Manager.prototype === alice.__proto__); // false
    console.log(Employee.sayHello); // undefined
    console.log(Employee.prototype.sayHello); // [Function: sayHello]

    // 3. 静态方法
    // 静态方法是类的方法，而不是实例的方法。它们可以通过类名直接调用，而不需要创建类的实例。
    class MathUtils {
      static add(a, b) {
        return a + b;
      }

      static subtract(a, b) {
        return a - b;
      }
    }

    console.log(MathUtils.add(2, 3)); // 5
    console.log(MathUtils.subtract(5, 2)); // 3




  </script>

</body>

</html>